<template>
<div style="z-index:5;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white">
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goper">
    <div class="div1">
        <span>身份验证</span>
    </div>
    <div style="margin-left:22px;margin-right:22px;margin-top:20px">
        <div>
            <span class="span1">设置新密码</span>
        </div>
        <div style="margin-top:40px;border-bottom: 0.7px solid rgb(215, 215, 215, 0.7);">
            <span style="font-size:18px;margin-right:18px">新密码</span>
            <input type="password" placeholder="请设置新密码" class="input" v-model="psw" @focus="InputFocus(0)" @blur="InputBlur">
            <img src="../../../../assets/changepsw/false.png" class="img_false" v-show="psw" @click="deletepsw(0)">
        </div>
        <div class="div33" :style="WhichInput==0?InputStyle[0]+MyDiv33Width:InputStyle[1]+'width:0px'"></div>

        <div style="margin-top:15px;border-bottom: 0.7px solid rgb(215, 215, 215 ,0.7);">
            <span style="font-size:18px">确认密码</span>
            <input type="password" placeholder="请再次输入新密码" class="input" v-model="psw2" @focus="InputFocus(1)" @blur="InputBlur">
            <img src="../../../../assets/changepsw/false.png" class="img_false" v-show="psw2" @click="deletepsw(1)">
        </div>
        <div class="div33" :style="WhichInput==1?InputStyle[0]+MyDiv33Width:InputStyle[1]+'width:0px'"></div>

        <div class="div3">
            <img src="../../../../assets/changepsw/no_ok.png" class="img_ok" v-show="!check1">
            <img src="../../../../assets/changepsw/yes_ok.png" class="img_ok" v-show="check1">
            <span style="margin-left:23px">密码由8-16位数字、字母或字符组成</span>
        </div>
        <div class="div3" style="margin-top:5px">
            <img src="../../../../assets/changepsw/no_ok.png" class="img_ok" v-show="!check2[2]">
            <img src="../../../../assets/changepsw/yes_ok.png" class="img_ok" v-show="check2[2]">
            <span style="margin-left:23px">至少含2种以上字符</span>
        </div>
        <div class="div3" style="margin-top:5px;color: rgb(255, 39, 86);" v-show="check3">
            <img src="../../../../assets/changepsw/error.png" class="img_ok">
            <span style="margin-left:23px">两次输入的密码不一致</span>
        </div>
        <div class="div2" :style="(check1&&check2[2]&&psw2)?'':'background-color: rgb(108, 216, 255);opacity: 0.6;'" @click="next">
            <span>确定</span>
        </div>
    </div>
</div>
</template>

<script>
//这个组件的路由后面需要设置，如果直接输入地址，跳转到检查密码页面
export default {
    name:'changepsw',
    data(){
        return{
            psw:'',
            psw2:'',
            check1:0,
            check2:{0:0,1:0,2:0},
            check3:0,
            pressed:0,
            WhichInput:99,
            InputStyle:['border-bottom: 0.7px solid rgb(40, 144, 255);','border-bottom: 0.7px solid rgb(229, 229, 229);'],
            MyDiv33Width:'',
            fromLogin:0,
            username:''
        }
    },
    methods:{
        deletepsw(index){
            switch (index) {
                case 0:this.psw=''
                    break;
                case 1:this.psw2=''
                    break;
                default:
                    break;
            }
        },
        goper(){this.$router.replace({name:'intercept_backspace'})},
        next(){
            this.pressed=0
            if(this.check1&&this.check2[2]&&this.psw2){
                if(this.psw!=this.psw2){
                    this.check3=1
                    this.pressed=1
                }else if(this.psw == this.psw2){    //要加这个判断,不能直接else,一遍一遍试出来的
                    this.$addr.get(`user/change_psw?`,{
                        params:{
                            newPassword:this.psw
                        }
                    }).then(
                        response=>{
                            this.$notify({
                                title: '恭喜您',
                                message: '修改密码成功',
                                type: 'success'
                            });
                            console.log('修改密码请求成功',response.data);
                            if(this.fromLogin){
                                this.$router.replace({name:'login',params:{'username':this.username}})
                            }else{
                                this.$router.replace({name:'intercept_backspace',params:{'changepsw':'success','username':this.username}})
                            }
                        },error=>{
                            this.$message({
                                message:'修改密码请求失败，请重新登陆',
                                type:'error'
                            })
                            console.log("修改密码请求失败",error.message);
                            this.$router.replace({name:'login'})
                        }
                    )
                }
            }
        },
        InputFocus(index){
            this.WhichInput=index
        },
        InputBlur(){
            this.WhichInput=99
        }
    },
    watch:{
        psw(value){
            this.check1=this.check3=0
            this.check2={0:0,1:0,2:0}
            for(let i=0 ; i< value.length ; i++){
                // console.log(this.psw.charAt(i).charCodeAt(),'&&');
                if(value.charAt(i).charCodeAt()>=48&&value.charAt(i).charCodeAt()<=57){
                    this.check2[0]=1
                }else{
                    this.check2[1]=1
                }
            }
            this.check2[2]=((this.check2[0]+this.check2[1])==2)?1:0
            if(value.length>=8 && value.length<=16){
                this.check1=1
            }
        },
        psw2(value){
            this.check3=0
            if(this.pressed && (value != this.psw)){
                this.check3=1
            }

        }
    },
    mounted(){
        if(this.$route.params.fromLogin != null || this.$route.params.fromLogin != ''){
            this.fromLogin=this.$route.params.fromLogin
        }
        if(this.$route.params.username != null || this.$route.params.username != ''){
            this.username=this.$route.params.username
        }
        this.MyDiv33Width='width:'+(window.innerWidth-44)+'px;'
        this.$notify({
            title: '恭喜您',
            message: '身份确认成功',
            type: 'success'
        });
    }
}
</script>

<style scoped>
.div33{
    margin-top: -.7px;
    position: absolute;
    transition: border-bottom .5s ease-in-out,width .5s ease-out;
}
.div1{
    background: linear-gradient(to right,rgb(110, 207, 255),rgb(24, 166, 249));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.span1{
    font-size: 28px;
    font-weight: 500;
}
.input{
    font-size: 16px;
    padding: 10px;
    height: 20px;
    border-style: none;
    outline: none;
    margin-left: 15px;
    width: 160px;
    margin-bottom: 1px;
}
input::-webkit-input-placeholder{
    color: rgb(174, 174, 174);
}
.img_back{
    margin-top: 28px;
    left: 14px;
    height: 18px;
    position: absolute;
}
.img_false{
    position: fixed;
    height: 15px;
    margin-top: 14px;
    right: 38px;
}
.div2{
    margin-top: 20px;
    background-color: rgb(85, 190, 255);
    font-size: 18px;
    color: white;
    margin-left: -10px;
    margin-right: -10px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
.div3{
    font-size: 14px;
    color: rgb(141, 141, 141);
    margin-top: 15px;
}
.img_ok{
    height: 18px;
    position: absolute;
    margin-top: 1px;
}
</style>